<template>
  <div class="payouts">
    <div class="payouts-block" v-if="payoutsShow == false">
      <div class="block-header">Link a U.S. bank account</div>
      <div class="block-img"></div>
      <div class="block-title">Account type</div>
      <div class="block-radio">
        <el-radio
          v-model="payoutsIndex"
          :label="0"
          size="medium"
          color="#0070e0"
          >Checking</el-radio
        >
      </div>
      <div class="block-radio">
        <el-radio
          v-model="payoutsIndex"
          :label="1"
          size="medium"
          color="#0070e0"
          >Savings</el-radio
        >
      </div>

      <div class="block-lint"></div>

      <div class="block-input">
        <el-input placeholder="Routing Number" v-model="routingInput" clearable>
        </el-input>
      </div>

      <div class="block-input">
        <el-input placeholder="Account Number" v-model="accountInput" clearable>
        </el-input>
      </div>

      <div class="block-button" @click="linkStop">Link Your Bank</div>
    </div>

    <div class="payouts-mian" v-else>
      <div class="mian-header">Link a card</div>
      <div ><img src="../../assets/logo.png" class="mian-img"></div>
      <div class="mian-from">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item label="" prop="credit">
            <el-input
              v-model="ruleForm.credit"
              placeholder="Debit or credit card number"
              clearable
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="" prop="date">
            <el-date-picker
              v-model="ruleForm.date"
              type="date"
              autocomplete="off"
              placeholder="Expiration date"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="" prop="code" class="common-display">
            <el-input
              v-model="ruleForm.code"
              placeholder="Security code"
              clearable
            ></el-input>

          </el-form-item>

          <el-form-item label="" prop="address">
            <el-input
                v-model="ruleForm.address"
                placeholder="Billing address"
                clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="mian-button" @click="cardStop('ruleForm')">Link Card</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      payoutsIndex: 0,
      routingInput: "",
      accountInput: "",
      payoutsShow: false,
      //-----------------
      ruleForm: {
        credit: "",
        date: "",
        code: "",
        address: "",
      },
      rules: {
        credit: [
          {
            required: true,
            message: "Debit or credit card number",
            trigger: "blur",
          },
        ],
        date: [
          {
            required: true,
            message: "Expiration date",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "Security code",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "Expiration date",
            trigger: "blur",
          },
        ],
      },
      optionsDate: [

      ],
      optionsAddress: [

      ],
    };
  },
  created() {  if (this.$route.query.payoutsTrue == 0) {
    this.payoutsShow = false;
  } else {
    this.payoutsShow = true;
  }},
  watch: {
    $route: {
      handler(newValue, oldValue) {
        if (this.$route.query.payoutsTrue == 0) {
          this.payoutsShow = false;
        } else {
          this.payoutsShow = true;
        }
      },
      deep: true,
    },
  },
  // mounted() {

  // },
  methods: {
    linkStop() {
      this.payoutsShow = true;
    },
    cardStop(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.common-display {
  display: flex;
  align-items: center;
}

.payouts {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;

  .payouts-block {
    .block-header {
      font-size: 30px;
      font-weight: 500;
    }

    .block-img {
      height: 150px;
      border-radius: 15px;
      margin: 20px 0;
      border: 1px solid #ddd;
    }

    .block-title {
      text-align: left;
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 20px;
    }

    .block-radio {
      display: flex;
      padding: 10px 0;
      box-sizing: border-box;
      align-items: center;

      /deep/ .el-radio {
        display: flex;
        align-items: center;
      }

      /deep/ .el-radio__label {
        font-size: 20px;
        color: #000;
      }

      /deep/ .el-radio__inner {
        width: 30px;
        height: 30px;
        border: 1px solid #dcdfe6;
      }

      /deep/ .el-radio__inner::after {
        width: 12px;
        height: 12px;
      }
    }

    .block-lint {
      margin: 20px 0;
    }

    .block-input {
      margin-bottom: 20px;

      /deep/ .el-input__inner {
        height: 50px;
      }
    }

    .block-button {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      border-radius: 50px;
      color: #fff;
      background: #0070ba;
      font-size: 14px;
      font-weight: bold;
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .payouts-mian {
    .mian-header {
      font-size: 30px;
      font-weight: 500;
    }

    .mian-img {
      margin: 20px auto 10px;
      width: 100px;
      height: 100px;

    }

    .mian-from {
      margin-top: 20px;
      width: 350px;
      margin-bottom: 40px;

      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
        width: 100%;
      }

      /deep/ .el-select {
        width: 100%;
      }

      /deep/ .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
      .code-img {
        width: 100px;
        height: 100%;
        border: 1px solid #ccc;
        margin-left: 10px;
        border-radius: 10px;
      }
    }

    .mian-button {
      padding: 15px 30px;
      box-sizing: border-box;
      display: inline;
      color: #fff;
      background: #0070ba;
      font-size: 14px;
      font-weight: bold;
      border-radius: 30px;
      cursor: pointer;
      margin-top: 20px;
    }
  }
}
</style>
